<template>
	<view class="addr-add">
		<view class="top-bg"></view>
		<view class="pl-3 pr-3 addr-add-wrap">
			<view class="pt-1 pb-2 pl-3 pr-3 addr-add-panel">
				<u--form class="mb-3 forgot-password-form" labelWidth="70" :borderBottom="false" :model="addrForm"
					:rules="addrRules" ref="addrFormRef">
					<u-form-item label="联系人" prop="ContactName" :borderBottom="true">
						<u--input v-model="addrForm.ContactName" placeholder="请输入姓名" border="none" clearable></u--input>
					</u-form-item>
					<u-form-item label="联系电话" prop="Tel" :borderBottom="true">
						<u--input v-model="addrForm.Tel" placeholder="请输入联系电话" border="none" clearable></u--input>
					</u-form-item>
					<u-form-item @click="showPicker=true" label="地址" prop="currPickedVal" :borderBottom="true">
						<u--input v-model="addrForm.currPickedVal" placeholder="请选择地区" disabled disabledColor="#ffffff"
							border="none" clearable></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="  " prop="Zone5" :borderBottom="true">
						<u--input v-model="addrForm.Zone5" placeholder="请输入详细地址" border="none" clearable></u--input>
					</u-form-item>

				</u--form>
				<u-button @click="handleAdd" color="#007aff" shape="circle" text="保存"></u-button>

			</view>

		</view>
		<u-picker :show="showPicker" @cancel="showPicker = false" ref="uPicker" :columns="columns"
			@confirm="handlePickerConfirm" @change="handlePickerChange">
		</u-picker>
	</view>
</template>

<script>
	import {
		addAddr,
		EditAddr
	} from "@/apis/user.js";
	import {
		getZoneInfo
	} from "@/apis/common.js";
	export default {
		data() {
			return {
				showPicker: false,

				columns: [],
				columnData: [],
				provinces: [],
				zoneInfo: [],
				inputStyle: {
					background: '#f1f1f1',
					padding: '6px 8px'
				},
				addrForm: {
					Tel: '',
					ContactName: '',
					ProvID: null,
					CityID: null,
					TownID: null,
					Zone5: '',
					Latitude: '22',
					Longitude: '11',
					currPickedVal: '',
				},
				addrRules: {
					ContactName: {
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					},
					Tel: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					Zone5: {
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					},
					currPickedVal: {
						required: true,
						message: '请选择地区',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onLoad(option) {
			this.fetchZoneInfo()
			if (option.AddrId) {
				uni.setNavigationBarTitle({
					title: '编辑地址'
				})
				const addrForm = this.addrForm
				addrForm.AddrID = option.AddrId
				addrForm.Tel = option.Mobile
				addrForm.ContactName = option.ContactName
				addrForm.ProvID = option.ProvID
				addrForm.CityID = option.CityID
				addrForm.TownID = option.TownID
				addrForm.Zone5 = option.Zone5
				addrForm.Latitude = option.Latitude
				addrForm.Longitude = option.Longitude
				addrForm.currPickedVal = option.ProvName + option.CityName + option.TownName
				this.addrForm = addrForm
			}

			console.log('addr onload', option)
			const _this = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					_this.addrForm.Latitude = res.latitude
					_this.addrForm.Longitude = res.longitude
				}
			});

		},
		methods: {
			async handleAdd() {
				if (!await this.$refs.addrFormRef.validate()) return;

				const addrForm = this.addrForm
				console.log('handleAdd addrForm', addrForm)

				const res = addrForm.AddrID ? await EditAddr(addrForm) : await addAddr(addrForm)
				console.log('handleAdd', res)
				
				if (res.MsgCode != 0) return
				uni.showToast({
					title: addrForm.AddrID ? '编辑成功' : '新增成功',
					icon: "none",
					mask: true,
					position: "center",
				});
				setTimeout(() => {
					this.$navigateBack(this.$router, 1)
				}, 1000)
			},
			handlePickerConfirm(e) {
				const addrForm = this.addrForm
				addrForm.ProvID = this.zoneInfo[e.indexs[0]].id
				addrForm.CityID = this.zoneInfo[e.indexs[0]].citys[e.indexs[1]].id
				addrForm.TownID = this.zoneInfo[e.indexs[0]].citys[e.indexs[1]].towns[e.indexs[2]].id
				addrForm.currPickedVal = e.value.join('')

				this.addrForm = addrForm
				this.showPicker = false
				console.log('handlePickerConfirm', e, addrForm)
			},
			handlePickerChange(e) {
				const {
					columnIndex,
					value,
					values,
					indexs,
					picker = this.$refs.uPicker
				} = e

				if (columnIndex === 0) {
					picker.setColumnValues(1, this.zoneInfo[indexs[0]].cityList)
					picker.setColumnValues(2, this.zoneInfo[indexs[0]].citys[0].townList)
				}
				if (columnIndex === 1) {
					picker.setColumnValues(2, this.zoneInfo[indexs[0]].citys[indexs[1]].townList)
				}
			},
			async fetchZoneInfo() {
				const res = await getZoneInfo()
				if (res.MsgCode != 0) return
				console.log('fetchZoneInfo', res)
				const provinces = []
				const zoneInfo = res.data.map(item => {
					provinces.push(item.name)
					item.cityList = item.citys.map(cItem => {
						cItem.townList = cItem.towns.map(tItem => {
							return tItem.name
						})
						return cItem.name
					})
					return item
				})
				this.provinces = provinces
				this.zoneInfo = zoneInfo
				this.columns = [provinces, zoneInfo[0].cityList, zoneInfo[0].citys[0].townList]
			},
		}
	}
</script>

<style lang="scss">
	.addr-add {
		.top-bg {
			width: 100%;
			height: 120rpx;
			background-color: #007aff;
			z-index: -1;
		}

		.addr-add-wrap {
			margin-top: -72rpx;

			.addr-add-panel {
				background-color: #fff;
				border-radius: $s-border-radius;
				box-shadow: $s-bg-shadow;
			}
		}
	}
</style>
